<template>
  <div class="home">
    <div class="htmleaf-container">
      <div class="holderCircle">
        <div class="dotCircle">
			<span class="itemDot active itemDot1" data-tab="1">
				<i class="fa fa-life-ring"></i>
				<span class="forActive"></span>
			</span>
          <span class="itemDot itemDot2" data-tab="2">
				<i class="fa fa-bomb"></i>
				<span class="forActive"></span>
			</span>
          <span class="itemDot itemDot3" data-tab="3">
				<i class="fa fa-heartbeat"></i>
				<span class="forActive"></span>
			</span>
          <span class="itemDot itemDot4" data-tab="4">
				<i class="fa fa-leaf"></i>
				<span class="forActive"></span>
			</span>
          <span class="itemDot itemDot5" data-tab="5">
				<i class="fa fa-magic"></i>
				<span class="forActive"></span>
			</span>
          <span class="itemDot itemDot6" data-tab="6">
				<i class="fa fa-pencil-square-o"></i>
				<span class="forActive"></span>
			</span>
          <span class="itemDot itemDot7" data-tab="7">
				<i class="fa fa-rss-square"></i>
				<span class="forActive"></span>
			</span>
          <span class="itemDot itemDot8" data-tab="8">
				<i class="fa fa-ship"></i>
				<span class="forActive"></span>
			</span>
          <span class="itemDot itemDot9" data-tab="9">
				<i class="fa fa-truck"></i>
				<span class="forActive"></span>
			</span>
          <span class="itemDot itemDot10" data-tab="10">
				<i class="fa fa-pied-piper"></i>
				<span class="forActive"></span>
			</span>
        </div>
        <div class="contentCircle">

          <div class="CirItem active CirItem1">
            {{ text }}
          </div>
          <div class="CirItem CirItem2">
            {{ text }}
          </div>
          <div class="CirItem CirItem3">
            {{ text }}
          </div>
          <div class="CirItem CirItem4">
            {{ text }}
          </div>
          <div class="CirItem CirItem5">
            {{ text }}
          </div>
          <div class="CirItem CirItem6">
            {{ text }}
          </div>
          <div class="CirItem CirItem7">
            {{ text }}
          </div>
          <div class="CirItem CirItem8">
            {{ text }}
          </div>
          <div class="CirItem CirItem9">
            {{ text }}
          </div>
          <div class="CirItem CirItem10">
            {{ text }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "@/assets/js/circle"
import "@/assets/css/htmleaf-demo.css";
import "@/assets/css/circle.css";

export default {
  name: "Home",
  data() {
    return {
      text: 'Welcome Auto Test Platform'
    }
  },
}
</script>
<style scoped>
.home {
  width: auto;
  height: 100%;
  background-color: #262632;
}

</style>